<template>
    <view>
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList?.content"
                :key="index"
                :title="item.staffName"
                rightText=""
                :note="`${item.studyTime}`"
                thumb="/static/tabBar/message-2.png"
                thumbSize="lg"
                showBadge
                badgeType="error"
                badge-positon="left"
                :badgeText="item.badgeText"
                link 
                :to="`/pages/messageDetails/messageDetails?id=${item.id}`"
            >
                <template v-slot:header>
                    <view
                        class="iconfont icon-xiaoxi icon-1"
                    ></view>
                </template>
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { robotSafeStudyListApi } from '@/apis'

    const checkList:Ref<any> = ref({
        content: [
            {
                staffName: '服务通知',
                studyTime: '暂无消息',
                badgeText: '1',
                id: 1
            }
        ]
    })
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(20)
    onShow(() => {
       status.value = 'no-more'
        // robotSafeStudyListApi({
        //    notNeedPage: false, //是否不需要分页
        //    pageNo: pageNo.value, //第几页,默认从1开始
        //    pageSize: pageSize.value, //每页几条
        //    sortField: '' //排序字段
        // }).then((res: any) => {
        //    console.log(res.data.content)
        //    checkList.value = res.data
        //    if (checkList.value.totalPages > pageNo.value) {
        //        status.value = 'more'
        //    } else {
        //        status.value = 'no-more'
        //    }
        // })
    })

    // 下拉刷新重新加载数据
    onPullDownRefresh(() => {
       status.value = 'loading'
       pageNo.value = 1
       uni.stopPullDownRefresh();
       // robotSafeStudyListApi({
       //     notNeedPage: false, //是否不需要分页
       //     pageNo: pageNo.value, //第几页,默认从1开始
       //     pageSize: pageSize.value, //每页几条
       //     sortField: '' //排序字段
       // }).then((res: any) => {
       //     console.log(res.data.content)
       //     checkList.value = res.data
       //     if (checkList.value.totalPages > pageNo.value) {
       //         status.value = 'more'
       //     } else {
       //         status.value = 'no-more'
       //     }
       // }).finally(() => {
       //     console.log(123)
       //     uni.stopPullDownRefresh();
       // })
    })


    // 上拉加载数据
    onReachBottom(() => {
        status.value = 'no-more'
       // if (checkList.value.totalPages > pageNo.value) {
       //     status.value = 'loading'
       //     pageNo.value++
       //     robotSafeStudyListApi({
       //          notNeedPage: false, //是否不需要分页
       //          pageNo: pageNo.value, //第几页,默认从1开始
       //          pageSize: pageSize.value, //每页几条
       //          sortField: '' //排序字段
       //     }).then((res: any) => {
       //         console.log(res.data.content)
       //         res.data.content.unshift(...checkList.value.content)
       //         checkList.value = res.data
       //         if (checkList.value.totalPages > pageNo.value) {
       //             status.value = 'more'
       //         } else {
       //             status.value = 'no-more'
       //         }
       //     })
       // }
       
    })
</script>

<style lang="scss" scoped>
    /* list样式修改 */
    .slot-box {
        flex: 1;
		display: flex;
		flex-direction: column;
	}
	.slot-text {
		flex: 1;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    .icon-1 {
        font-size: 80rpx;
        color: rgb(209, 223, 88);
        margin-right: 18rpx;
    }
    
</style>
